﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="css/login.css" />
</head>
<body>

  <style>


        .inp {
            border: 1px solid #cccccc;
            border-radius: 2px;
            padding: 0 10px;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }

        .btn {
            display: inline-block;
            box-sizing: border-box;
            border: 1px solid #cccccc;
            border-radius: 2px;
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
        }

        .btn:hover {
            background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
        }


    </style>

<div class="box">
<form>
    <!--填写手机号-->
    <div class="text1">
        <input placeholder="手机号" id="phone" name="phone" />
        <span id="phoneerror"></span>
    </div>
    <!--填写密码 -->
    <div class="text2">
        <input placeholder="密码" id="pwd" name="pwd" type="password" />
        <span id="pwderror"></span>
    </div>
    <!--忘记密码-->
    <div class="forgetbtn">
        <a href="forget.html">忘记密码?</a>
    </div>

    <!--验证的动图-->
 <div>
        <!--<label>完成验证：</label>-->
             <div id="captcha">
                 <p id="wait" class="show">正在加载验证码......</p>
             </div>
 </div>
    <!--登陆按钮-->
  <div class="loginBtn" id="loginBtn">登录</div>

    <!--跳转到注册-->
    <div class="zhucebtn">
        <a href="reg.html">没有账号，点此<span>注册</span></a>
    </div>

</form>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://www.geetest.com/demo/libs/gt.js"></script>



<script>
    var handler = function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
            $("#wait").hide();
        });
        $('#btn').click(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                return alert('请完成验证');
            }
            $.ajax({
                url: 'gt/validate-slide',
                type: 'POST',
                dataType: 'json',
                data: {
                    username: $('#username2').val(),
                    password: $('#password2').val(),
                    geetest_challenge: result.geetest_challenge,
                    geetest_validate: result.geetest_validate,
                    geetest_seccode: result.geetest_seccode
                },
                success: function (data) {
                    if (data.status === 'success') {
                        alert('登录成功');
                    } else if (data.status === 'fail') {
                        alert('登录失败，请完成验证');
                        captchaObj.reset();
                    }
                }
            });
        })
        // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
        window.gt = captchaObj;
    };


    $.ajax({
        url: "http://www.geetest.com/demo/gt/register-slide?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {

            // 调用 initGeetest 进行初始化
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                product: "float", // 产品形式，包括：float，popup
                width: "320px"
                // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
            }, handler);
        }
    });
</script>

<script src="login.js"></script>

</body>
</html>




